<template>
    <div class="main">
        <div class="topTitle">资产导入</div>
        <div class="form_content">
            <NScrollbar>
                <div class="content">
                    <div class="title">资产导入步骤</div>
                    <div class="step_line">1.下载导入模版
                        <NButton type='primary' @click="download">下载</NButton>
                    </div>
                    <div class="step_line">
                        2.按照Excel格式,填充数据,不要调整列顺序
                    </div>
                    <div class="step_line">
                        3.选择要导入的文件
                        <!-- <VUpload :fileList="fileList"/> -->
                        <NUpload :file-list="fileList":default-upload="false" :on-change="onFileChanged" :max="1" accept=".xlsx, .xls">
                            <NButton type='primary'>选择文件</NButton>
                        </NUpload>
                    </div>
                </div>
            </NScrollbar>
        </div>
    </div>
    <FixedAction>
        <div style="display: flex;justify-content: center;">
            <NSpace justify="center">
                <NButton style="width: 80px; color: #5fb17f" ghost @click="goBack">
                    <template #icon>
                        <img :src="VBackImg" style="width: 25rem; height: 25rem" />
                    </template>
                    返回
                </NButton>
                <NButton style="width: 80px;" type="primary" @click="confirm">
                    导入
                </NButton>
            </NSpace>
        </div>
    </FixedAction>
    <NModal :auto-focus="false" v-model:show="modalVisible" @close="closeModal">
        <VDialogContent @close="closeModal" @submit="closeModal" title="导入失败">
            请<NButton type="primary" text style="font-size: 14px;" @click="downloadErrorFile()">
                点此
            </NButton>下载错误文件
        </VDialogContent>
    </NModal>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import {
    NSpace,
    NForm,
    NInput,
    NFormItem,
    NSelect,
    NButton,
    NScrollbar,
    NModal,
    NIcon,
    useMessage,
    NSpin,
    NTreeSelect,
    NInputNumber,
    NUpload,
    type FormInst
} from 'naive-ui'
import router from '@/router'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import { onMounted, computed, onDeactivated } from 'vue'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import VScope from '@/views/OA/Common/Scope.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import { CloseFilled } from '@vicons/material'
import { useRoute } from 'vue-router'
import VUpload from '@/components/Upload/upload.vue'
import VBackImg from '@/assets/images/back.png'
import { ErrorRound } from '@vicons/material'

const message = useMessage()

const tags = useTagStore().tags

const fileList: any = ref([])
const onFileChanged = (v: any) => {
    fileList.value = v.fileList
}
const modalVisible: any = ref(false)
const importResult = ref<string | null>(null)
const download = () => {
    let a = document.createElement('a');
    a.href = "https://oa.hzgjbbg.cn/files/hzbbgUpload/20240617/资产导入模板.xlsx";
    a.download = '资产导入模版.xlsx';
    a.click();
}
/** 下载错误文件 */
const downloadErrorFile = () => {
    if (importResult.value) {
        let a = document.createElement('a');
        a.href = importResult.value;
        a.click();
    }
}
const closeModal = () => {
    modalVisible.value = false
    importResult.value = null
}
const goBack = () => {
    const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
    tags.splice(index, 1)
    if (tags.length == 0) {
        router.push({ path: '/OA/Workbench/UserDesktop' })
    } else history.back()
}
const confirm = async () => {
    const file = fileList.value[0].file
    const [error, res] = await sendRequest<HttpResponse<any>>({
        module: 'assetsManagement',
        api: 'importAssetExcel',
        override: {
            data: { file: file }
        }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg)
    console.log(res)
    const { result, excelPath } = res.data
    if (result === "true") {
        message.success("导入成功")
        goBack()
    } else {
        message.error("导入失败")
        modalVisible.value = true
        importResult.value = excelPath
    }
}

onMounted(() => {
    fileList.value = []
})

onDeactivated(() => {
    fileList.value = []
})

</script>

<style scoped lang="scss">
@mixin CommonFont {
    font-size: 16rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
    width: 240rem;
}

.main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .topTitle {
        width: 100%;
        border-bottom: 1px solid #fff;
        padding: 15rem 20rem;
        margin-bottom: 20rem;
        @include CommonFont;
    }

    .form_content {
        width: 100%;
        height: 100%;
        padding: 0 20rem 0rem;

        .content {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            padding: 20rem 0 180rem;
            background-color: #ebeceb;

            .title {
                font-size: 20px;
                font-weight: bolder;
                margin-bottom: 30px;
            }

            .step_line {
                width: 200px;
                text-align: left;
                margin-bottom: 10px;
            }
        }
    }
}
</style>